<!--
* @fileName home.vue
* @author caoke
* @date 2022/10/17 15:13:42
* @version V1.0.0
* @description 
!-->
<template>
  <div style="height: 100%">
    <el-container>
      <el-header class="header" v-if="!isFixed">
        <app-header />
      </el-header>
      <!-- 浮动的头 -->
      <app-header v-else />
      <el-main class="main">
        <!-- 舞台 AppMain组件-->
        <app-main ref="appMain"></app-main>
      </el-main>
    </el-container>

  </div>
</template>

<script>
import AppHeader from "../../components/layout/app-header.vue";
import appMain from "../../components/layout/app-main.vue";
export default {
  components: { appMain, AppHeader },
  name: "home",
  data() {
    return {
      path: "",
      isFixed: false,
    };
  },
  watch: {
    $route(to) {
      this.path = to.path;
    },
    path(to) {
      if (to == "/about") {
        this.isFixed = true;
      } else {
        this.isFixed = false;
      }
    },
  },
  created() {
    this.path = this.$route.path;
  },
  methods: {},
};
</script>
<style lang='scss' scoped>
.header {
  padding: 0;
  width: 100%;
  //   background-color: rgba(255, 255, 255, 0.3);
  //   background: $header-background;
  height: 52px !important;
  //   display: flex;
  //   align-items: center;
  //   justify-content: space-between;
  box-shadow: 0px 2px 6px 0px rgba(190, 204, 216, 0.4);
  border-bottom: 1px solid rgba(190, 204, 216, 0.4);
}
.el-main {
  overflow-y: auto;
  position: relative;
  padding: 0;
}
</style>